<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
    <title>登录页</title>
</head>
<link rel="stylesheet" th:href="@{/css/bootstrap.min.css}" />
<style>
    .toLogin {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: 20%;
    }
</style>


<body>
    <div class="container group toLogin">
        <form th:action="@{/toIndex}">
            <div class="form-group">
                <label>Name:</label>
                <input type="text" name="nickname"  class="form-control" id="nickname" onblur="btnAble()"/>
            </div>
            <div class="form-group">
                <input type="submit" value="连接"  class="form-control" id="connect"  disabled="disabled" />
            </div>
        </form>
    </div>
</body>
<script>
    var nickname = document.getElementById("nickname")
    var btn = document.getElementById("connect")


    function btnAble(){
        if(nickname.value === "" || nickname.value == null){
            btn.setAttribute("disabled", "disabled")
        }else {
            btn.removeAttribute("disabled")
        }
    }
</script>
</html>